﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SDT.Site.ViewModels.ProjectDetailModels>" %>
<div class="duan">
    <div class="tit_duan">THÔNG TIN DỰ ÁN</div>
    <div class="list_duan">
	    <ul>
            <li><a id="cont-0" href="#projectTabs-0" class="tabLink act">Bản đồ</a></li> 
            <%foreach (var type in Model.ProjectImageTypies){%>                
                 <li><a id="cont-<%=type.ID %>" href="#projectTabs-<%=type.ID %>" class="tabLink"><%=Html.Encode(type.Name)%></a></li> 
            <%} %>
        </ul>	    
    </div>
    <div class="clear"></div>
    <div class="tabrec_cnt" style="min-height: 141px;">
		<%foreach (var type in Model.ProjectImageTypies)
        {
        var l =Model.Project.ProjectImages.Where(e=>e.ImageTypeID==type.ID).ToList();
        Model.ImageListPath = Model.ImagePath + Model.Project.ID + "\\";
        Model.ImageListUrl = Model.ImageUrl + Model.Project.ID + "/";
        var imgsBig = SDT.Lib.Common.Utils.GenThumbnailInFolder(type.ID, 500, 375, Model.ImageListPath, Model.ImageListUrl);
        var imgsThums = SDT.Lib.Common.Utils.GenThumbnailInFolder(type.ID, 128, 92, Model.ImageListPath, Model.ImageListUrl);
        %>
		<div class="duan_cate tabcontent hide" align="center" id="cont-<%=type.ID %>-1">
        	<ul>
                <% var count = imgsThums.Length >= 4 ? 4 : imgsThums.Length;
                   for (int i = 0; i < count; i++)
                  { %>
                <li>
                     <a href="<%=imgsBig[i] %>" class="lightbox<%=type.ID %>" rel="gallery<%=type.ID %>" title="<%=type.Name %>"><img alt="" width="128px" height="92px" src="<%=imgsThums[i] %> " /></a>
                </li>
                <%} %>
            </ul>
            <%-- <% var count = imgsThums.Length >= 1 ? 1 : imgsThums.Length;
                   for (int i = 0; i < count; i++)
                  { %>
                
                     <a href="<%=imgsBig[i] %>" class="lightbox<%=type.ID %>" rel="gallery<%=type.ID %>" title="<%=type.Name %>"><img alt="" width="128px" height="92px" src="<%=imgsThums[i] %> " /></a>
               
                <%} %>--%>
            <%for (int i = 0; i < imgsBig.Length; i++)
              { %>
                <a href="<%=imgsBig[i] %>" class="lightbox<%=type.ID %>" rel="gallery<%=type.ID %>" title="<%=type.Name %>"></a>   
             <%} %>
        </div>
        <%} %>
        <div class="duan_cate tabcontent" align="center" id="cont-0-1">
            <%if (Model.Project.Latitude != null && Model.Project.Longitude != null)
              { %>
            <div id="maps" onunload="GUnload()">
                    <div class="map">
                        <div id="map_canvas" style="width: 100%; height: 400px; padding-bottom: 10px; position: relative;">
                        </div>
                        <input type="hidden" name="latitude" id="latitude" value="<%= Model.Project.Latitude %>" />
                        <input type="hidden" name="longitude" id="longitude" value="<%= Model.Project.Longitude %>" />
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            initialize();
                            showAddress();
                        });
                        var map = null;
                        var geocoder = null;
                        var _latitube = 21.033;
                        var _longitube = 105.850;

                        function initialize() {
                            if (GBrowserIsCompatible()) {
                                map = new GMap2(document.getElementById("map_canvas"));
                                map.setCenter(new GLatLng(_latitube, _longitube), 15);
                                map.setUIToDefault();
                                geocoder = new GClientGeocoder();
                                var marker = new GMarker(new GLatLng(_latitube, _longitube), { draggable: true });

                                //Draggable marker
                                GEvent.addListener(marker, "dragstart", function() {
                                    map.closeInfoWindow();
                                });
                                GEvent.addListener(marker, "dragend", function() {

                                    marker.openInfoWindowHtml("aaaaa" + marker.getLatLng());
                                    document.getElementById("latitude").value = marker.getLatLng().lat();
                                    document.getElementById("longitude").value = marker.getLatLng().lng();
                                });
                                map.addOverlay(marker);
                            }
                        }

                        function showAddress() {
                            var lat, lng;
                            lat = 0; //window.opener.document.getElementById("latitude").value;
                            lng = 0; //window.opener.document.getElementById("longitude").value;
                            //alert(lat +"-----"+ lng);
                            if (lat == '' && lng == '' || lat == 0 && lng == 0) {
                                map.clearOverlays();
                                map.setCenter(new GLatLng(_latitube, _longitube), 15);
                                var marker = new GMarker(new GLatLng(_latitube, _longitube), { draggable: false });

                                document.getElementById("latitude").value = marker.getLatLng().lat();
                                document.getElementById("longitude").value = marker.getLatLng().lng();

                                //Draggable marker
                                GEvent.addListener(marker, "dragstart", function() {
                                    map.closeInfoWindow();
                                });
                                GEvent.addListener(marker, "dragend", function() {
                                    document.getElementById("latitude").value = marker.getLatLng().lat();
                                    document.getElementById("longitude").value = marker.getLatLng().lng();
                                });
                                map.addOverlay(marker);
                            }
                            else {
                                map.clearOverlays();
                                map.setCenter(new GLatLng(lat, lng), 15);
                                var marker = new GMarker(new GLatLng(lat, lng), { draggable: true });

                                document.getElementById("latitude").value = marker.getLatLng().lat();
                                document.getElementById("longitude").value = marker.getLatLng().lng();

                                //Draggable marker
                                GEvent.addListener(marker, "dragstart", function() {
                                    map.closeInfoWindow();
                                });
                                GEvent.addListener(marker, "dragend", function() {

                                    //marker.openInfoWindowHtml("aaaaa"+ marker.getLatLng());
                                    document.getElementById("latitude").value = marker.getLatLng().lat();
                                    document.getElementById("longitude").value = marker.getLatLng().lng();
                                });
                                map.addOverlay(marker);
                            }
                        }
                    </script>
                </div>
                <%} %>
        </div>
        <div class="clear"></div>
	</div>
 </div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".tabLink").each(function() {
            $(this).click(function() {
                tabeId = $(this).attr('id');
                $(".tabLink").removeClass("act");
                $(this).addClass("act");
                $(".tabcontent").addClass("hide");
                $("#" + tabeId + "-1").removeClass("hide")
                return false;
            });
        });
        $("[class*=lightbox]").lightbox({
            fitToScreen: true
        });
    });
</script>